<template>
    <Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row class="query-form2">
                <Col span="8">
                    <FormItem label="时间：" prop="date">
                        <DatePicker type="daterange"  v-model="form1.date" split-panels placeholder="请选择" style="width: 100%"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="16">
                    <div style="float: right;">
                        <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                        <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
                    </div>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large" :loading="exportLoading" class="ivu-btn-add" icon="md-add" @click="exportInfo">导出</Button>
                </Col>
            </Row>
        </Form>

        <Table ref='table' :height="tableHeight" :loading="loading"   border :columns="columns1" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>

    </layout>
</template>

<script>
    import {Api} from '../../../api/index.js'
    import {sessionStorage} from '@/common/cacheUtils.js';

    export default {
        data() {
            return {
                buttonLoading: false,
                loading: false,
                form1: {},
                //分页参数
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                columns1: [
                    {
                        title: "序号",
                        width: 80,
                        align: "center",
                        fixed: 'left',
                        render: (h, params) => {
                            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                    {
                        minWidth: 300,
                        title: '公司名称',
                        align: 'center',
                        key: 'companyName',
                    },
                    {
                        minWidth: 150,
                        title: '总经理登录次数',
                        align: 'center',
                        tooltip: true,
                        key: 'jingliCount',
                    },
                    {
                        minWidth: 150,
                        title: '书记登录次数',
                        align: 'center',
                        key: 'shujiCount',
                    },
                    {
                        minWidth: 150,
                        title: '总登录次数',
                        align: 'center',
                        key: 'loginCount',
                    },
                    {
                        minWidth: 150,
                        title: '待办数量',
                        align: 'center',
                        key: 'procinstCount',
                    },
                    {
                        minWidth: 150,
                        title: '安全负责人登录次数',
                        align: 'center',
                        key: 'safeCount',
                    },
                    {
                        minWidth: 150,
                        title: '环保负责人登录次数',
                        align: 'center',
                        key: 'envCount'
                    }
                ],
                dataTable: [],
                showdata: {},
                tableHeight: 10,
                exportLoading:false
            }
        },
        mounted: function () {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query();
        },
        methods: {
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            query() {
                let data = {
                    orgId: sessionStorage('userId').getObject('userId').companyId,
                    currentPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                };
                this.loading = true;
                if (this.form1.date[0] != "" && this.form1.date[1] != "") {
                    data.startDate = this.formatDate(new Date(this.form1.date[0]), 'yyyy-MM-dd');
                    data.endDate = this.formatDate(new Date(this.form1.date[1]), 'yyyy-MM-dd');
                }
                let url = Api.queryAdminUseCaseStatistics;
                this.$http.get(url, {
                    params: data
                }).then((res) => {
                    this.dataTable = res.data.data.data;
                    this.pagedata.total = res.data.data.total
                    this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            exportInfo(){
                let data = {
                    orgId: sessionStorage('userId').getObject('userId').companyId,
                    currentPage: 1,
                    size: this.pagedata.total,
                };
                if (this.form1.date[0] != "" && this.form1.date[1] != "") {
                    data.startDate = this.formatDate(new Date(this.form1.date[0]), 'yyyy-MM-dd');
                    data.endDate = this.formatDate(new Date(this.form1.date[1]), 'yyyy-MM-dd');
                }
                this.exportLoading = true;
                this.$http.get(Api.exportAdminUseCaseStatistics, {responseType: 'blob',params: data }).then(res => {
                    this.exportLoading = false;
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = "管理员使用情况考核得分表.xlsx" //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                }).catch(e => {
                    this.exportLoading = false;
                    this.$Message.error("导出失败")
                })
            },
            reset() {
                this.form1 = {date:['','']}
                this.query();
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
        },
    }
</script>
<style lang='css' scoped>
    @import '../../../index.css';


</style>
